<template>
  <div class="store-info page">
    <div class="mall-search bg_none">
      <div class="van-icon van-icon-arrow-left" @click="$router.go(-1)"></div>
      <div class="search">
        <van-field v-model="searchValue" readonly @click="goSearch" class="input" :clearable='true' placeholder="搜索商品/店铺">
          <template #left-icon>
            <i class="icon-search-white"></i>
          </template>
        </van-field>
      </div>
    </div>
    <div class="goods-store">
      <div class="info">
        <div class="goods-store-img">
          <img :src="stroeShopInfo.shop_img" />
        </div>
        <div class="goods-store-info">
          <div class="name">{{stroeShopInfo.shop_name}}
            <span class="mod_tag" v-if="stroeShopInfo.is_seif">自营</span>
          </div>
          <div class="s-info">
            <span class="fans">商品 {{stroeShopInfo.goods_num}} 件</span>
            <span>粉丝 {{stroeShopInfo.favorites_num}} 人</span>
          </div>
        </div>
        <div class="btn">
          <span class="icon-collection-store" @click="storeFavorite(stroeShopInfo.isFavorites)">{{!stroeShopInfo.isFavorites?'收藏店铺':'已收藏'}}</span>
        </div>
      </div>
    </div>
    <div class="store-tab">
      <template v-for="(item,index) in storeTab">
        <div class="tab" :key="index" :class="{active: storeTabIndex === item.state}">
          <span class="name" ref="storeTab" @click="storeTabchange(index)">{{item.name}}</span>
        </div>
      </template>
      <span class="activeLine" v-if="storeTabLeft" :style="'left:'+storeTabLeft+'px;width:'+storeTabWidth+'px'"></span>
    </div>
    <div class="nav-bar-srot store-srot" v-if="storeTabIndex===3">
      <span class="tab" :class="{active: sortActive === 1}" @click="onChangeSrot(1)">综合</span>
      <div class="tab" :class="{active: sortActive === 2}">
        <span class="sort" :class="{desc: sortType == 'sales-desc',asc: sortType == 'sales-asc', active: sortActive === 3}" @click="onChangeSrot(2)">销量</span>
      </div>
      <div class="tab" :class="{active: sortActive === 3}">
        <span class="sort" :class="{desc: sortType == 'price-desc',asc: sortType == 'price-asc'}" @click="onChangeSrot(3)">价格</span>
      </div>
    </div>
    <div class="content" ref="webview">
      <concentration v-if="storeTabIndex==1">
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>4?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-if="dataList.length>0">
          <product-list :product="dataList" v-model="isLoaded" />
        </van-list>
      </concentration>
      <div class="product-list store-list" v-if="storeTabIndex==2 || storeTabIndex==3">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="nodata" v-if="dataList.length===0" style="height:200px;">暂无数据</div>
          <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>4?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-if="dataList.length>0">
            <product-list :product="dataList" v-model="isLoaded" />
          </van-list>
        </van-pull-refresh>
      </div>
      <category v-if="storeTabIndex==4" :category="stroeShopCategory" />
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
import concentration from './concentration';
import category from './category';
import { setTimeout } from 'timers';
export default {
  name: 'storeInfo',
  data () {
    return {
      searchValue: '',
      isActive: 3,
      sortType: '', // 排序类型
      sortActive: 1, // 当前选中排序字段
      storeTabIndex: 1,
      storeTabLeft: 0,
      storeTabWidth: 0,
      stroeShopInfo: {},
      stroeShopCategory: [], // 店铺分类
      apiUrl: 'goodslist',
      apiType: 'goods',
      storeTab: [{
        state: 1,
        name: '精选'
      }, {
        state: 2,
        name: '新品'
      }, {
        state: 3,
        name: '全部商品'
      }, {
        state: 4,
        name: '分类'
      }]
    };
  },
  components: {
    concentration,
    category
  },
  mixins: [mixins],
  // created () {
  //   this.stroeInfo();
  //   this.params = {
  //     shopId: this.$route.query.id,
  //     isHot: 1
  //   };
  //   this.getList('goodslist', true);
  // },
  created () {

  },
  activated () {
    this.stroeInfo();
    this.params = {
      shopId: this.$route.query.id,
      isHot: 1
    };
    this.getList('goodslist', true);
  },
  mounted () {
    this.$nextTick(() => {
      var storeTab = this.$refs.storeTab[this.storeTabIndex - 1];
      this.storeTabWidth = storeTab.offsetWidth;
      this.storeTabLeft = storeTab.offsetLeft;
    });
  },
  methods: {
    // 跳转搜索
    goSearch () {
      this.$router.push({ 'path': '/search' });
    },
    // 全部商品排序
    onChangeSrot (data) {
      this.dadaList = [];
      this.sortActive = data;
      // 综合排序
      if (data === 1) {
        this.sortType = '';
        this.getList('goodslist', true);
      }
      // 销量、价格排序
      if (data === 2 || data === 3) {
        // 判断是销量还是价格
        if (data === 2) {
          this.sortType = this.sortType === 'sales-asc' ? 'sales-desc' : 'sales-asc';
        } else {
          this.sortType = this.sortType === 'price-asc' ? 'price-desc' : 'price-asc';
        }
        this.params = {
          ob: data === 2 ? '1' : '2',
          shopId: this.$route.query.id,
          doa: this.sortType === 'sales-asc' || this.sortType === 'price-asc' ? '0' : '1'
        };
        this.getList('goodslist', true);
      }
    },
    // 切换
    storeTabchange (index) {
      this.storeTabIndex = index + 1;
      this.page = 1;
      this.storeTabWidth = this.$refs.storeTab[index].offsetWidth;
      this.storeTabLeft = this.$refs.storeTab[index].offsetLeft;
      if (this.storeTabIndex === 1) {
        this.params = {
          shopId: this.$route.query.id,
          isHot: 1
        };
        this.getList('goodslist', true);
      }
      if (this.storeTabIndex === 2) {
        this.params = {
          shopId: this.$route.query.id,
          isNew: 1
        };
        this.getList('goodslist', true);
      }
      if (this.storeTabIndex === 3) {
        this.params = {
          shopId: this.$route.query.id
        };
        this.getList('goodslist', true);
      }
      if (this.storeTabIndex === 4) {
        this.stroeCategory();
      }
      this.$refs.webview.scrollTop = 0; // 更新滚动条
      this.$refs.webview.scrollBy(0, 0);
    },
    // 初始化店铺数据
    stroeInfo () {
      this.$toast.loading({ duration: 0 });
      this.$API.store.storeInfo({ id: this.$route.query.id }).then(res => {
        if (!res.code) {
          this.stroeShopInfo = res.data;
          this.$toast.clear();
        }
      });
    },
    // 初始化店铺分类
    stroeCategory (id) {
      this.$toast.loading({ duration: 0 });
      this.$API.store.stroeCategory({ pid: id, sid: this.$route.query.id }).then(res => {
        if (!res.code) {
          this.stroeShopCategory = res.data.map((item) => {
            item.children = [];
            item.isShow = false;
            return item;
          });
          this.$toast.clear();
        }
      });
    },
    // 收藏店铺
    storeFavorite (type) {
      this.$toast.loading({ duration: 0 });
      this.$API.store.storeFavorite({ id: this.stroeShopInfo.id }, !type ? 'add' : 'cancel').then(res => {
        if (!res.code) {
          this.stroeShopInfo.isFavorites = !type ? 1 : 0;
          setTimeout(() => {
            this.$toast(!type ? '收藏成功' : '取消成功');
          }, 600);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.store-info {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .mall-search {
    margin-top: 10px;
  }
  .nav-bar-srot {
    padding: 5px 0;
  }
  .store-tab {
    display: flex;
    background-color: #fff;
    line-height: 88px;
    position: relative;
    .tab {
      display: block;
      flex: 1;
      text-align: center;
      .name {
        font-size: 28px;
        color: #666;
      }
    }
    .tab.active {
      .name {
        color: #000;
        font-weight: 800;
      }
    }
    .activeLine {
      position: absolute;
      display: block;
      bottom: 14px;
      height: 4px;
      border-radius: 4px;
      transition: left ease 0.3s;
      background-color: #000;
    }
  }
  .goods-store {
    border-radius: 10px;
    background-color: #fff;
    padding: 5px 40px;
    .info {
      display: flex;
      overflow: hidden;
      padding-bottom: 20px;
    }
    .goods-store-img {
      width: 98px;
      height: 98px;
      background-color: #eee;
      border-radius: 4px;
    }
    .goods-store-info {
      flex: 1;
      padding: 0 20px 0;
      .name {
        font-size: 34px;
        color: #252525;
        font-weight: 800;
        position: relative;
        display: flex;
        align-items: center;
        .mod_tag {
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(255, 0, 52, 1);
          border-radius: 5px;
          padding: 0 6px;
          font-size: 24px;
          margin-left: 15px;
          color: #ff0034;
        }
      }
      .s-info {
        font-size: 24px;
        color: #959595;
        padding: 10px 0 0;
        .fans {
          margin-right: 40px;
        }
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-collection-store,
      .icon-go-store {
        display: inline-block;
        height: 60px;
        font-size: 28px;
        color: #fff;
        padding: 0 22px 0 50px;
        border-radius: 30px;
        line-height: 60px;
        position: relative;
        background-color: #ff0034;
        &::before {
          content: '';
          display: inline-block;
          width: 28px;
          height: 26px;
          position: absolute;
          left: 15px;
          top: 19px;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: left top;
        }
      }
      .icon-collection-store::before {
        background-image: url('/static/img/icon-collection-store-white.png');
      }
      .icon-go-store::before {
        background-image: url('/static/img/icon-go-store.png');
      }
    }
  }
  .nav-bar-srot {
    .tab {
      color: #959595;
    }
  }
  .content {
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
    background-color: #f5f5f4;
    .pro-item {
      width: 200px;
    }
  }
}
</style>
